<template>
  <laker-dialog
    v-model="visible"
    title="上岗到位签到表"
    width="90%"
    height="900"
    :show-fullscreen="true"
    :show-close="true"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-row :gutter="10" style="margin: 20px">
      <el-col :span="8">
        <table class="laker-table">
          <tr>
            <th colspan="5">签到要求</th>
          </tr>
          <tr>
            <th style="width: 30px">序号</th>
            <th>工作组</th>
            <th>应签到次数</th>
            <th>已签到次数</th>
            <th>详情</th>
          </tr>
          <tr v-for="(item, index) in groupList" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.cstName }}</td>
            <td>{{ item.cstCount }}</td>
            <td>{{ item.compCount }}</td>
            <td><el-button type="primary" icon="el-icon-more-filled" circle @click="openDetail(item)"></el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="6">
        <table class="laker-table">
          <tr>
            <th colspan="4">签到明细</th>
          </tr>
          <tr>
            <th style="width: 30px">序号</th>
            <th>姓名</th>
            <th>次数</th>
            <th>详情</th>
          </tr>
          <tr v-for="(item, index) in userList" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.userName }}</td>
            <td>{{ item.userCount }}</td>
            <td><el-button type="primary" icon="el-icon-more-filled" circle @click="openDetail2(item)"></el-button></td>
          </tr>
        </table>
      </el-col>
      <el-col :span="10">
        <table class="laker-table">
          <tr>
            <th colspan="5">上岗到位检查问题</th>
          </tr>
          <tr>
            <th style="width: 30px">序号</th>
            <th>到位时间</th>
            <th>问题类型</th>
            <th>问题描述</th>
            <th style="width: 50px">状态</th>
          </tr>
          <tr v-for="(item, index) in signList" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.signTime }}</td>
            <td>{{ item.signType }}</td>
            <td>{{ item.signName }}</td>
            <td>{{ item.signSta }}</td>
          </tr>
        </table>
      </el-col>
    </el-row>
  </laker-dialog>
</template>

<script>
import LakerDialog from '@/components/lakerDialog/index.vue'
import { dayjs } from 'element-plus'
import dprevent from '@/api/dprevent'

export default {
  name: 'SigninTable',
  components: { LakerDialog },
  emits: ['success', 'closed'],
  data() {
    return {
      dialog: {
        raDialog: false
      },
      mode: 'add',
      visible: false,
      titleMap: {
        add: '选择设备类型',
        edit: '编辑人员',
        show: '查看'
      },
      elmain: 'elmain',
      today: dayjs().format('YYYY-MM-DD'),
      risk01: 0,
      groupList: [],
      userList: [],
      signList: []
    }
  },
  mounted() {
    this.getApiData()
  },
  methods: {
    getApiData() {
      dprevent.getSigngroup().then((res) => {
        if (res.code === 'success') {
          if (res.result) {
            this.groupList = res.result
          }
        }
      })
    },
    getUserData() {
      dprevent.getSignuser().then((res) => {
        if (res.code === 'success') {
          if (res.result) {
            this.userList = res.result
          }
        }
      })
    },
    getSignlist() {
      dprevent.getSignlist().then((res) => {
        if (res.code === 'success') {
          if (res.result) {
            this.signList = res.result
          }
        }
      })
    },
    openDetail(item) {
      this.getUserData(item)
    },
    openDetail2(item) {
      this.getSignlist(item)
    },
    //显示
    open(mode = 'add') {
      this.mode = mode
      this.visible = true
      return this
    },
    close() {
      this.visible = false
      return this
    },
    //表单注入数据
    setData(data) {
      console.log(data)
    }
  }
}
</script>

<style scoped lang="scss"></style>
